<!DOCTYPE html>
<style>
body {
    margin: 0;
    zoom: 4
}
div {
    border-style: solid;
    border-width: 20px;
    width: 0
}
.t1 {
    /* SVG paints a beveled rectangle. */
    border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="3" height="3"><polygon points="0,1 1,0 2,0 3,1, 3,2 2,3 1,3 0,2" fill="green"/></svg>') 1
}
.t2 {
    /* SVG fills top left corner of nine piece image given a 40x40 default object size. */
    border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="40"><rect width="20" height="20" fill="green"/></svg>') 20;
}
.t3 {
    /* SVG fills top left corner of nine piece image. */
    border-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3 3" width="30" height="30"><rect x="0" y="0" width="1" height="1" fill="green"/></svg>') 10;
    width: 40px;
    height: 40px;
    border-bottom-width: 0;
    border-right-width: 0
}
</style>
<div class="t1"></div>
<div class="t2"></div>
<div class="t3"></div>
